<template>
   <div>
    <h1>vuex辅助函数计数器</h1>
    <div style="color:red">{{count}}</div>
    <div style="color:springgreen;font-weight:bold">{{doubleCount}}</div>
    <button @click="add">同步+2</button>
    <button @click="addAsync">异步+5</button>


   </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
    computed:{
        ...mapState(['count']),
        ...mapGetters(['doubleCount'])
    },
    methods:{
        ...mapMutations(['INCRMENT_COUNT']),
        ...mapActions(['incrementAsync']),
        add(){
           this.INCRMENT_COUNT(2)
        },
        addAsync(){
            this.incrementAsync(5)
        }
    }
}
</script>

<style>

</style>